<template>
  <div class="common-warp wh100 warp-bg">
    <Search
      @onSearch="handleSearch"
      :searchOptions="state.data.searchOptions"
      @change="handleChange"
    />
    <List
      ref="myTable"
      v-bind="state.data"
      @edit="handleEdit"
      @del="handleDel"
      @lock="handleLock"
    >
    </List>
    <!-- <Add @add="handleAdd" /> -->
    <DelDialog ref="delDialogRef" @del="handleDialogDel" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import List from "@/components/list/index.vue";
import Add from "@/components/add/index.vue";
import Search from "@/components/search/index.vue";
import DelDialog from "@/components/delDialog/index.vue";
import {
  useAccessCommandUpdateApi,
  useAccessDoorDeleteApi,
  useAccessDoorPageApi,
} from "@/api/index";
import { useRouter } from "vue-router";

import { message } from "ant-design-vue";
import { useUrlParams } from "@/hooks/useUrlParams";
import type { AccessDoorItem } from "@/types/access/door";
const { data } = useUrlParams();
const router = useRouter();
const delDialogRef = ref();

const state = reactive({
  data: {
    list: [] as any[],
    config: {
      total: 0, // 列表总数
      edit: false,
      del: false,
      othenBtnOne: false,
      othenBtnTwo: false,
      lock: true,

      submit: false,
      title: "code",
      // subtitle: 'code',
      layout: "vertical", //开启垂直排列
      content: [
        { key: "设备名称", value: "deviceName" },
        { key: "序列号", value: "deviceCode" },
        { key: "设备状态", value: "isOnline" },
      ],
    },
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    searchOptions: [
      { label: "序列号", value: "deviceCode" },
      { label: "设备名称", value: "deviceName" },
      // { label: "门编号", value: "code" },
    ],
  },
  showDialog: false,
});

const getData = async () => {
  let {
    data: { pageNum, pageSize, total, list },
  } = await useAccessDoorPageApi(state.data.params);
  list || [];
  state.data.list = list.map((item: AccessDoorItem) => {
    return {
      ...item,
      isOnline: item.isOnline === 1 ? "在线" : "离线",
    };
  });
  state.data.params.pageSize = pageSize;
  state.data.params.pageNum = pageNum;
  state.data.config.total = total;
};

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any;
  conditions[selectValue] = inputValue;
  state.data.params = Object.assign({}, state.data.params, conditions);
  getData();
};

const handleLock = async (row: any) => {
  await useAccessCommandUpdateApi({ doorCode: row.code, option: 1 });
  message.success("操作成功", 2);
};

const handleChange = () => {
  state.data.params = {
    pageNum: 1,
    pageSize: 10,
  };
};

// 新增设备
const handleAdd = () => {
  router.push({ name: "AccessAddDev" });
};

// 编辑设备信息
const handleEdit = ({ code }: AccessDoorItem) => {
  router.push({
    name: "AccessEditDev",
    query: {
      code,
    },
  });
};

// 打开删除弹窗
const handleDel = (row: AccessDoorItem) => {
  delDialogRef.value.openDialog(row);
};
// 确认删除
const handleDialogDel = async ({ code }: AccessDoorItem) => {
  await useAccessDoorDeleteApi({ code });
  message.success("操作成功", 2);
  getData();
};

onMounted(() => {
  document.title = "门";
  getData();
});
</script>
<style scoped lang="less"></style>
